<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2响应式原理</title>
</head>
<body>
    <div class="app">
        hello <br/>
        <div class="vue2"></div>
    </div>
    <script>
        let data = {
            msg: 'hello',
            count: 1
        }

        let vm = {};
        // Object.defineProperty(vm,'msg',{
        //     enumerable: true, // 可枚举
        //     configurable: true, // 可配置
        //     get() {
        //         return data.msg
        //     },
        //     set(newVal) {
        //         if(data.msg === newVal) { return };
        //         data.msg = newVal;
        //         document.querySelector('.vue2').textContent = data.msg;
        //     }
        // })


        function proxyData(){
            Object.keys(data).forEach(key =>{
                Object.defineProperty(vm,key,{
                    enumerable: true,
                    configurable: true,
                    get() {
                        return data[key];
                    },
                    set(newVal) {
                        if (data[key] === newVal){return};
                        data[key] = newVal;
                        document.querySelector('.vue2').textContent = data[key];
                    }
                })
            })
        }
        proxyData();

        vm.msg = 'hello world!';
    </script>
</body>
</html>